import { t } from 'i18next'
import { AddIcon, StyledWrap } from './style'
import { Button, Modal, Space } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { DragDropContextProvider, Droppable } from '@/plugins/dnd'
import Alert from '@/components/Alert'
import { FC, useEffect, useState } from 'react'
import { useMeetingTVWallStore } from '../store'
import MemberList from '../../../components/MemberList'
import { SpiltEntity } from '../interface'
import { UserEntity } from '@/api/create/interface'
type DropDataMt = UserEntity
interface DropData<T = DropDataMt, K = { [key: string]: any }> {
	data?: {
		mt?: T
	} & K
	from?: string
	index?: number
}
const defaultData = [
	{
		sub_chn_index: 0,
		account: '',
		account_type: undefined,
		name: '',
	},
	{
		sub_chn_index: 1,
		account: '',
		account_type: undefined,
		name: '',
	},
	{
		sub_chn_index: 2,
		account: '',
		account_type: undefined,
		name: '',
	},
	{
		sub_chn_index: 3,
		account: '',
		account_type: undefined,
		name: '',
	},
]
export const FourScreen: FC = () => {
	/**四分屏数据 */
	const [spilt, setSpilt] = useState<Array<SpiltEntity>>(defaultData)
	const { update, correct_style_operate_box_info, operate_correct_style_info, correct_style } = useMeetingTVWallStore(
		(state) => ({
			update: state.update,
			correct_style_operate_box_info: state.correct_style_operate_box_info,
			show_mt_name: state.show_mt_name,
			operate_correct_style_info: state.operate_correct_style_info,
			correct_style: state.correct_style,
		}),
		shallow
	)
	/**初始化 */
	useEffect(() => {
		return () => {
			setSpilt(JSON.parse(JSON.stringify(defaultData)))
		}
	}, [])
	useEffect(() => {
		if (correct_style_operate_box_info) {
			let _source = operate_correct_style_info[correct_style]?.members ?? []
			/**四分屏数据*/
			let _spilt =
				_source.find((item) => item.member_type === 9 && item.hdu_id === correct_style_operate_box_info)
					?.spilt ?? []
			if (_spilt.length === 0) {
				let _default_split = [{}, {}, {}, {}].map((item, index) => {
					return Object.assign({}, { sub_chn_index: index })
				})
				setSpilt(_default_split)
				return
			} else {
				let result = [{}, {}, {}, {}].map((item, index) => {
					return Object.assign({}, { sub_chn_index: index })
				})
				result = result.map((item) => {
					let _value = item
					for (let i = 0; i < _spilt.length; i++) {
						if (item.sub_chn_index === _spilt[i].sub_chn_index) {
							_value = _spilt[i]
						}
					}
					return _value
				})
				setSpilt(result)
			}
		} else {
			let _default_split = [{}, {}, {}, {}].map((item, index) => {
				return Object.assign({}, { sub_chn_index: index })
			})
			setSpilt(_default_split)
			return
		}
	}, [correct_style_operate_box_info])

	/**确认*/
	const handleConfirm = () => {
		if (!correct_style_operate_box_info) return
		/**关闭四分屏*/
		update({ isFourScreenOpen: false })
		setCash()
		/**设置缓存数据 */
	}
	const setCash = () => {
		let source = {}
		/**找到当前通道对应的盒子*/
		let member = operate_correct_style_info[correct_style]?.members || []
		/**判断当前通道是否已有缓存*/
		let flag = member?.some((item) => {
			return item.hdu_id === correct_style_operate_box_info
		})
		if (flag) {
			/**已存在缓存*/
			for (let i = 0; i < member.length; i++) {
				if (member[i].hdu_id === correct_style_operate_box_info) {
					member[i] = {
						member_type: 9,
						spilt: spilt.filter((item) => {
							if (item.account && item.account_type) {
								return {
									account: item.account,
									account_type: item.account_type,
									name: item.name,
									sub_chn_index: item.sub_chn_index,
								}
							}
						}),
						hdu_id: correct_style_operate_box_info,
					}
				}
			}
		} else {
			/**不能找到新增*/
			member?.push({
				member_type: 9,
				spilt: spilt.filter((item) => {
					if (item.account && item.account_type) {
						return {
							account: item.account,
							account_type: item.account_type,
							name: item.name,
							sub_chn_index: item.sub_chn_index,
						}
					}
				}),
				hdu_id: correct_style_operate_box_info,
			})
		}
		source = Object.assign({}, operate_correct_style_info[correct_style], { members: member })
		operate_correct_style_info[correct_style] = source
		update({ operate_correct_style_info: operate_correct_style_info })
	}
	/**清除通道*/
	const clearBox = (sub_chn_index: number) => {
		let _spilt = spilt.map((item, _index) => {
			if (_index === sub_chn_index) {
				return Object.assign({ sub_chn_index: sub_chn_index })
			}
			return item
		})
		setSpilt(_spilt)
	}
	/**关闭模态框 */
	const handleCloseModal = () => {
		update({ isFourScreenOpen: false })
	}
	const handleDrop = (dataTransfer: DropData, index: number) => {
		let sourceData = dataTransfer.data?.mt
		if (sourceData) {
			let _spilt = spilt.map((item, _index) => {
				if (_index === index && sourceData) {
					return Object.assign({}, sourceData, { sub_chn_index: index })
				}
				return item
			})
			setSpilt(_spilt)
		}
	}
	return (
		<>
			<DragDropContextProvider>
				<StyledWrap className="mcc-vmp-modal-wrap">
					<div style={{ display: 'flex' }}>
						<div className="left-panel">
							<div className="content">
								{spilt.map((item: Partial<SpiltEntity>, index: number) => {
									return (
										<>
											<Droppable onDrop={(dataTransfer) => handleDrop(dataTransfer, index)}>
												{(setDroppableRef) => (
													<div ref={setDroppableRef} className="item">
														{!item.account && <AddIcon></AddIcon>}
														{<span className="name">{item.name || ''}</span>}
														{
															<span
																className="delete"
																onClick={() => {
																	clearBox(item.sub_chn_index || index)
																}}
																title={t('清空通道')}
															></span>
														}
													</div>
												)}
											</Droppable>
										</>
									)
								})}
							</div>
						</div>
						<div className="right-panel">
							<MemberList height={240} />
						</div>
					</div>
					<div className="setting-footer">
						<div className="tip">
							<span className="icon"></span>
							{t('请拖拽与会方至指定的画面中')}
						</div>
						<Space className="right-btn">
							<Button onClick={handleConfirm}>{t('确认')}</Button>
							<Button onClick={handleCloseModal}>{t('关闭')}</Button>
						</Space>
					</div>
				</StyledWrap>
			</DragDropContextProvider>
		</>
	)
}
